<template>
    <mi-form-page @submit="submit"
                  title="商品编辑"
                  v-model:show="edit.show"
                  :loading="edit.loading"
    >

        <el-form :model="edit.info"
                 :rules="rules"
                 ref="formRef">

            <el-tabs>
                <el-tab-pane label="商品信息">

                    <el-form-item label="商品名称" prop="title">
                        <mi-input v-model="edit.info.title" />
                    </el-form-item>

                    <el-form-item label="轮播图" prop="imageArr">
                        <mi-up-images v-model="edit.info.imageArr" />
                        <mi-form-aux>建议尺寸：800*800，可拖拽改变图片顺序，默认首张图为主图，最多上传10张</mi-form-aux>
                    </el-form-item>

                    <el-form-item label="分类" prop="cate_ids">
                        <goods-cate-select v-model="edit.info.cate_ids" multiple />
                    </el-form-item>
                    <el-form-item label="标签" prop="tag_ids">
                        <goods-tag-select v-model="edit.info.tag_ids" multiple />
                    </el-form-item>

                    <el-form-item label="运费模板" prop="postage_tpl_id">
                        <postage-tpl-select v-model="edit.info.postage_tpl_id" />
                    </el-form-item>

                    <el-form-item label="库存计算方式" prop="dec_stock_type">
                        <el-space fill>
                            <mi-radio v-model="edit.info.dec_stock_type" :options="[{id:1,title:'下单减库存'},{id:2,title:'付款减库存'}]" />
<!--                            <mi-form-aux>-->
<!--                                可在店铺设置中修改默认的库存计算方式-->
<!--                            </mi-form-aux>-->
                        </el-space>

                    </el-form-item>

                    <el-form-item label="上架" prop="show_type">
                        <mi-radio v-model="edit.info.show_type" />
                    </el-form-item>

                    <el-form-item label="分销" prop="is_dist">
                        <mi-radio v-model="edit.info.is_dist" />
                    </el-form-item>
                    <el-form-item label="推荐" prop="is_rec">
                        <mi-radio v-model="edit.info.is_rec" />
                    </el-form-item>
                    <el-form-item label="新品" prop="is_new">
                        <mi-radio v-model="edit.info.is_new" />
                    </el-form-item>
                    <el-form-item label="精选" prop="is_top">
                        <mi-radio v-model="edit.info.is_top" />
                    </el-form-item>
                    <el-form-item label="直降" prop="is_dec">
                        <mi-radio v-model="edit.info.is_dec" />
                    </el-form-item>
                    <el-form-item label="限时" prop="is_time">
                        <mi-radio v-model="edit.info.is_time" />
                    </el-form-item>
                    <el-form-item label="复购率" prop="again_rate">
                        <mi-input-number v-model="edit.info.again_rate" />
                    </el-form-item>

                </el-tab-pane>

                <el-tab-pane label="规格与价格">
                    <el-form-item label="商品规格">
                        <mi-radio v-model="edit.info.spec_type"
                                  :options="[{id:1,title:'单规格'}, {id:2, title:'多规格'}]"></mi-radio>
                    </el-form-item>

                    <!--    多规格开始  -->
                    <div v-if="edit.info.spec_type == 2">
                        <goods-sku-edit  ref="specEditRef"  v-if="!edit.loading" />
                    </div>
                    <!--                多规格结束-->

                    <!--                单规格开始-->
                    <div v-else>
                        <el-form-item label="成本" prop="cost_price">
                            <mi-input-number v-model="edit.info.cost_price" :precision="2" />
                        </el-form-item>
                        <el-form-item label="划线价" prop="line_price">
                            <mi-input-number v-model="edit.info.line_price" :precision="2" />
                        </el-form-item>
                        <el-form-item label="售价" prop="price">
                            <mi-input-number v-model="edit.info.price" :precision="2" />
                        </el-form-item>
                        <el-form-item label="库存" prop="stock">
                            <mi-input-number v-model="edit.info.stock" />
                        </el-form-item>
                        <el-form-item label="重量（千克）" prop="weight">
                            <mi-input-number v-model="edit.info.weight" />
                        </el-form-item>
                        <el-form-item label="体积（立方米）" prop="volume">
                            <mi-input-number v-model="edit.info.volume" />
                        </el-form-item>
                        <el-form-item label="商品编码" prop="goods_no">
                            <mi-input v-model="edit.info.goods_no" />
                        </el-form-item>
                    </div>
                    <!--                单规格结束-->
                </el-tab-pane>

                <el-tab-pane label="商品详情">
                    <!--                    <mi-wang-editor v-model="edit.info.content" :height="500" />-->
                    <mi-wang-editor v-model="edit.info.content"/>
                </el-tab-pane>

                <el-tab-pane label="其他设置">

                    <el-form-item label="虚拟销量" prop="sales_vir">
                        <mi-input-number v-model="edit.info.sales_vir"/>
                        <mi-form-aux>对外展示的商品销量</mi-form-aux>
                    </el-form-item>

                    <el-form-item label="库存预警" prop="stock_danger">
                        <mi-input-number v-model="edit.info.stock_danger"/>
                        <mi-form-aux>最低库存预警值</mi-form-aux>
                    </el-form-item>

                    <el-form-item label="视频">
                        <mi-up-video v-model="edit.info.video" size="90px" />
                    </el-form-item>
                    <el-form-item label="视频封面">
                        <mi-up-image v-model="edit.info.video_cover" size="90px" />
                    </el-form-item>

                    <!--                    <el-form-item label="积分" prop="point">-->
                    <!--                        <mi-input v-model.number="info.point" type="number"></mi-input>-->
                    <!--                    </el-form-item>-->
                </el-tab-pane>

            </el-tabs>
        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">
import {ref, onBeforeMount, reactive, onMounted, watch, inject, provide, markRaw} from "vue";
import global from "@/dict/global";
import {makeModelAuth} from "@/utils/auth";
import List from "@/model/list";
import Edit from "@/model/edit";
import {simpleGet, simplePost} from "@/utils/request";
import {FormInstance} from "element-plus";
import {msgError, msgSuccess} from "@/utils/alert";
import {useAdminStore} from "@/store/admin";
import GoodsCateSelect from "@/views/store/components/GoodsCateSelect.vue";
import GoodsSkuEdit from "@/views/store/components/GoodsSkuEdit/index.vue";
import GoodsTagSelect from "@/views/store/components/GoodsTagSelect.vue";
import PostageTplSelect from "@/views/delivery/components/PostageTplSelect.vue";


const rules = {
    title:[{required:true, message:'商品名称必填'}],
    cate_ids:[{required:true, message:'商品分类必填'}],
    images:[{required:true, message:'轮播图必填'}],
    content:[{required:true, message:'商品详情必填'}],
    postage_tpl_id:[{required:true, message:'运费模板必填'}],
    // ot_price: [
    //     {
    //         validator:(rule:any, value:any, callback:any) => {
    //             if (edit.info.is_multi_attr==0 && (!value || value==0)){
    //                 callback(new Error('必须大于0'))
    //             }
    //             callback()
    //         }
    //     }
    // ],
    price:[
        {
            validator:(rule:any, value:any, callback:any) => {
                if (edit.info.spec_type==1 && (!value || value==0)){
                    callback(new Error('售价必须大于0'))
                }
                callback()
            }
        }
    ],
    stock:[
        {
            validator:(rule:any, value:any, callback:any) => {
                if (edit.info.spec_type==1 && (!value || value==0)){
                    callback(new Error('库存必须大于0'))
                }
                callback()
            }
        }
    ],
}
const auth = makeModelAuth('store.goods')
const formRef = ref<FormInstance>()
const productTypeOptions = global.productType
const specEditRef = ref() as any
const list = inject<List>("list")
const edit = inject<Edit>("edit", new Edit({}))
const adminStore = useAdminStore()

const submit = async () => {
    let url = '/' + (list?.currentRow?.id ? auth.edit : auth.add)

    if (edit.info.spec_type == 2){
        let attrValidRes = await specEditRef.value.validateAttrValues()
        if (!attrValidRes){
            msgError("商品规格验证失败")
            return
        }
    }

    await edit.submit({
        formRef: formRef.value,
        url: url,
        list: list
    })
}

watch(() => edit.show, (nv,ov) => {
    if (nv){ // 打开
        // 每次打开都更新表单数据
        edit.init(async () => {
            const id = list?.currentRow?.id
            if (id) {
                // 请求表单数据
                let res = await simpleGet('/' + auth.edit, {id:id})
                edit.info = res.info
            } else {
                edit.info = {
                    spec_type: 1,
                    status: 1,
                    sort: 1000,
                    show_type: 1,
                    images:[],
                    site_id: adminStore.site.id,
                    dec_stock_type:1,
                    is_dist:1,
                }
            }
        })
    }

})


</script>

<style>
.com_attr .el-col {
    margin-bottom: 10px;
}
.com_attr .el-form-item__label{
    width: 60px !important;
}
</style>
